import React, { Component } from "react";

export default class RenderControl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
      count: 0,
    };
    this.component = <Child num={this.state.num}></Child>;
  }
  ControlRender = () => {
    const { props } = this.component;

    if (props.num !== this.state.num) {
      return (this.component = React.cloneElement(this.component, {
        num: this.state.num,
      }));
    }
    return this.component;
  };
  render() {
    const { count, num } = this.state;
    return (
      <div>
        <h1>Rendercontrol</h1>
        {this.ControlRender()}
        <p>num:{this.state.num}</p>
        <button onClick={() => this.setState({ num: num + 1 })}>num++</button>
        <p>count:{this.state.count}</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          count++
        </button>
      </div>
    );
  }
}
function Child() {
  console.log("child组件");

  return (
    <>
      <div>这是child组件</div>
    </>
  );
}
